<template>
  <div class="userControl">
    <!-- 用户管理 -->
    <div class="userList" v-if="role==='1'">
      <div class="chooseContainer padding-box">
        <el-form ref="searchKey" :model="searchKey" :inline="true" label-width="80px">
          <el-form-item label="客户姓名" prop="name">
            <el-input placeholder="客户姓名" v-model="searchKey.name" class="chooseBox"></el-input>
          </el-form-item>
          <el-form-item label="客户电话" prop="mobile">
            <el-input placeholder="客户电话" v-model="searchKey.mobile" class="chooseBox"></el-input>
          </el-form-item>
          <el-form-item label="用户类型" prop="userType">
            <el-select v-model="searchKey.userType" class="chooseBox" filterable placeholder="用户类型" clearable>
              <el-option v-for="item in userTypeList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消费次数" prop="orderNum">
            <el-select v-model="searchKey.orderNum" class="chooseBox" filterable placeholder="消费次数/月" clearable>
              <el-option v-for="item in orderNumList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间" prop="option">
            <el-select v-model="searchKey.option" class="chooseBox" filterable placeholder="时间" clearable>
              <el-option v-for="item in optionList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="startTime">
            <el-date-picker v-model="searchKey.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择开始日期" default-time="00:00:00">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="endTime">
            <el-date-picker v-model="searchKey.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择结束日期" default-time="23:59:59">
            </el-date-picker>
          </el-form-item>
          <el-form-item class="btnBox">
            <el-button type="primary" @click="searchUser">查询</el-button>
            <el-button @click="searchClear('searchKey')">重置</el-button>
            <!-- <el-button @click="exportUser">导出客户</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="padding-box">
        <el-table :data="userData" style="width: 100%" v-loading="loadingTable"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)" empty-text="暂无相关用户">
          <el-table-column prop="id" label="用户ID"  align="center">
          </el-table-column>
          <el-table-column prop="photo" label="用户头像"  align="center">
            <template slot-scope="scope">
              <img style="width:60px;height:60px" :src="scope.row.photo" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名"  align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.sex === 1" style="width:60px;margin:0 auto;">
                <span>男</span>
              </div>
              <div v-if="scope.row.sex === 2" style="width:60px;margin:0 auto;">
                <span>女</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="电话"  align="center">
          </el-table-column>
          <el-table-column prop="userType" label="用户类型" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.userType === '1'" style="width:60px;margin:0 auto;">
                <span>普通用户</span>
              </div>
              <div v-if="scope.row.userType === '2'" style="width:60px;margin:0 auto;">
                <span>充值用户</span>
              </div>
              <!-- <div v-if="scope.row.sex === '3'" style="width:60px;margin:0 auto;">
                <span>会员</span>
              </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" :formatter="dateFormat"   align="center">
          </el-table-column>
          <el-table-column prop="loginDate" label="最近登陆"  :formatter="dateFormatLogin" align="center">
          </el-table-column>
          <el-table-column prop="orderNum" label="消费次数/月"  align="center">
          </el-table-column>
          <el-table-column label="操作" min-width="100" align="center"  >
            <template slot-scope="scope">
              <el-button type="text" @click="seeAllrecord(scope.row)" size="mini">查看全部记录</el-button>
              <!-- <el-button type="text" size="mini" @click="deleteConsumer(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pageContainer" style="padding-bottom:30px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="userList" v-if="role==='2'">
      您没有权限查看
    </div>
    <version></version>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import version from '@/base/version/version'
import { pageCommon } from '@/assets/js/mixin'
export default {
  name: 'userControl',
  components: {
    version
  },
  mixins: [pageCommon],
  data () {
    return {
      userTypeList: [
        {
          text: '普通用户',
          value: 1
        },
        {
          text: '充值用户',
          value: 2
        }
        // {
        //   text: '会员',
        //   value: 3
        // }
      ],
      orderNumList: [
        {
          text: '1',
          value: 1
        },
        {
          text: '2',
          value: 2
        },
        {
          text: '3',
          value: 3
        },
        {
          text: '4',
          value: 4
        },
        {
          text: '5',
          value: 5
        },
        {
          text: '>5',
          value: 6
        }
      ],
      optionList: [
        {
          text: '注册时间',
          value: 1
        },
        {
          text: '最近登陆',
          value: 2
        }
      ],
      searchKey: {
        name: '',
        mobile: '',
        userType: '',
        option: '',
        startTime: '',
        endTime: '',
        orderNum: ''
      },
      loadingTable: true,
      userData: [
      ]
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created () {
    // this.searchBtn()
    this.role = this.userInfo.roleId
    console.log(this.userInfo.userId)
    if (!this.noReadayLoading) {
      this.searchBtn()
    }
  },
  methods: {
    // 修改每页显示的数据数目
    handleSizeChange (val) {
      this.pageSize = val
      this.searchBtn()
    },
    // 设置pageNo
    handleCurrentChange (val) {
      this.pageNo = val
      this.searchBtn()
    },
    seeAllrecord (row) {
      this.$router.push({ name: 'userControl/seeAllrecord', query: { id: row.id } })
    },
    searchBtn () {
      this.$axios.post('/api/appUser/showUsersByCondition',
        {
          userId: this.userInfo.userId,
          name: this.searchKey.name,
          mobile: this.searchKey.mobile,
          startTime: this.searchKey.startTime,
          userType: this.searchKey.userType,
          endTime: this.searchKey.endTime,
          orderNum: this.searchKey.orderNum,
          pageNo: this.pageNo,
          option: this.searchKey.option,
          pageSize: this.pageSize
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.users
          console.log(arr)
          let userList = []
          for (let i = 0; i < arr.length; i++) {
            userList.push({
              id: arr[i].id,
              name: arr[i].name,
              sex: arr[i].sex,
              userType: arr[i].userType,
              photo: arr[i].photo,
              createTime: arr[i].createTime,
              loginDate: arr[i].loginDate,
              orderNum: arr[i].orderNum,
              mobile: arr[i].mobile
            })
          }
          this.userData = [...userList]
          this.total = res.total
        }
      })
    },
    searchUser () {
      this.$axios.post('/api/appUser/showUsersByCondition',
        {
          userId: this.userInfo.userId,
          name: this.searchKey.name,
          mobile: this.searchKey.mobile,
          startTime: this.searchKey.startTime,
          userType: this.searchKey.userType,
          endTime: this.searchKey.endTime,
          orderNum: this.searchKey.orderNum,
          pageNo: 1,
          option: this.searchKey.option,
          pageSize: this.pageSize
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.users
          console.log(arr)
          let userList = []
          for (let i = 0; i < arr.length; i++) {
            userList.push({
              id: arr[i].id,
              name: arr[i].name,
              sex: arr[i].sex,
              userType: arr[i].userType,
              photo: arr[i].photo,
              createTime: arr[i].createTime,
              loginDate: arr[i].loginDate,
              orderNum: arr[i].orderNum,
              mobile: arr[i].mobile
            })
          }
          this.userData = [...userList]
          this.total = res.total
        }
      })
    },
    searchClear (searchKey) {
      this.$nextTick(() => {
        if (this.$refs[searchKey] !== undefined) {
          this.$refs[searchKey].resetFields()
        }
        this.searchBtn()
      })
    },
    dateFormat (row, column) {
      var date = row.createTime.substring(0, 10) + ' ' + row.createTime.substring(11, 19)
      return date
    },
    dateFormatLogin (row, column) {
      if (row.loginDate !== null) {
        var date = row.loginDate.substring(0, 10) + ' ' + row.loginDate.substring(11, 19)
        return date
      }
    },
    exportUser () { }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  width 100%
  padding $spacing
  padding-bottom 20px
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    width 250px
    margin-right $spacing
    margin-bottom $spacing
</style>
